<script setup lang="ts">
import type {ProductResponseData, TypeData, TypeDataResponseData} from "./apis/type"
// import { useUserStore } from "@/pinia/stores/user"
import {getProduct, getTypes} from "./apis"

// const router = useRouter()
//
// const userStore = useUserStore()

const params = {
  pageNo: 1,
  pageSize: 10,
  code: "",
  type: ""
}

const typeRequestParams = {
  dictType: "su_product_type",
}

const data = ref<ProductResponseData>({
  code: 0,
  msg: "",
  data: {
    total: 0,
    list: []
  }
})

const typeData = ref<TypeData[]>([])

function getProductList() {
  getProduct(params).then((res) => {
    data.value = res
  })
}

function getTypeData() {
  getTypes(typeRequestParams).then((res) => {
    typeData.value = res.data
  })
}

function changePage(page: number) {
  params.pageNo = page
  getProductList()
}

const active = ref(0);
// 正确示例
interface Info {
  title: string;
  // 其他可能的属性...
}
function onClickTab({title}: Info) {
  if (title == 'All') {
    title = ''
  }
  params.type = title
  getProductList()
}

onMounted(() => {
  getProductList()
  getTypeData()
})
</script>

<template>
  <div un-py-16px>
    <van-cell-group inset>
      <van-tabs v-model:active="active" @click-tab="onClickTab">
        <van-tab v-for="item in typeData" :title="item.label"></van-tab>
      </van-tabs>

      <van-field
        v-model="params.code"
        center
        clearable
        label="Ref.No"
        placeholder="Please input your code"
      >
        <template #button>
          <van-button size="small" type="primary" @click="getProductList()">
            Search
          </van-button>
        </template>
      </van-field>
    </van-cell-group>
    <van-cell-group inset style="margin-top: 10px">
      <van-cell v-for="item in data.data.list" :key="item.id" :title="item.code" is-link :to="`/product/detail/${item.id}`" />
    </van-cell-group>
    <van-cell-group inset style="margin-top: 10px">
      <van-pagination @change="changePage" v-model="params.pageNo" :total-items="data.data.total" :show-page-size="params.pageNo">
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
        <!--        <template #page="{ text }"> -->
        <!--          {{ text }} -->
        <!--        </template> -->
      </van-pagination>
    </van-cell-group>
  </div>
</template>
